<template>
  <div class="ele-body ele-body-card">
    <el-row>
      <div class="el-card is-never-shadow" style="padding: 20px;margin-bottom: 10px;">
        <el-col :span="12">
          <div style="float: left;">
            <span style="float: left;margin-top: 30px;"><el-avatar :size="60" :src="avatar" /></span>
            <div class="ele-cell-content" style="margin-top: 5px;">
              <h4 class="ele-elip" style="font-size: 0.94rem;">Hi！{{ name }}，很高兴见到你👋。{{ itsTimeDo }}</h4>
              <div class="ele-text-secondary ele-elip" style="margin-top: 8px;color: #909399;font-size: 15px;">
                <i class="el-icon-sunny" />
                <span> 采得百花成蜜后，为谁辛苦为谁甜。</span>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'DashboardAdmin',
  components: {
  },
  data() {
    return {
      itsTimeDo: ''
    }
  },
  mounted() {
    this.itsTimeDoing()
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  methods: {
    itsTimeDoing() {
      const date = new Date()
      const now = date.getHours()
      if (this.isInRange(now, 2, 5)) {
        this.itsTimeDo = '凌晨了，该休息了！注意身体！😪'
      } else if (this.isInRange(now, 5, 8)) {
        this.itsTimeDo = '早晨，开始全新的一天！😊'
      } else if (this.isInRange(now, 8, 12)) {
        this.itsTimeDo = '上午好，开始摸鱼的一天！😄'
      } else if (this.isInRange(now, 12, 18)) {
        this.itsTimeDo = '下午好，快要下班了！再坚持下💪'
      } else if (this.isInRange(now, 18, 23)) {
        this.itsTimeDo = '晚上了，请点击右上角关闭！👉'
      } else {
        this.itsTimeDo = '深夜了，为什么还在打开该系统?💢'
      }
    },
    isInRange(number, minNumber, MaxNumber) {
      return number >= minNumber && number < MaxNumber
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.ele-body.ele-body-card {
  padding-bottom: 0;
}
.ele-body {
  padding: 15px;
  height: 100%;
}
.el-avatar {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: var(--color-text-dark-primary);
  background: var(--avatar-background-color);
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.ele-cell-content{
  display: inline-block;
  margin-left: 15px;
}
</style>
